.container {
  width: 100%;
  height: 100%;
  padding: 16px 20px;

  .din {
    font-family: 'DIN-Light';
  }

  .chart {
    display: flex;
    align-items: center;

    &_head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 12px;
      line-height: 16px;

      .new_nergy {
        font-weight: 400;
        font-size: 20px;
      }

      .unit {
        color: rgba(255, 255, 255, 0.6);
      }
    }

    &_pie {
      position: relative;
      width: 160px;
      height: 160px;
    }

    &_data {
      flex: 1;
      margin-left: 25px;
      padding: 12px;
      overflow: hidden;
      background: rgba(24, 160, 251, 0.1);
      border-radius: 4px;

      > div + div {
        margin-top: 12px;
      }

      > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 16px;
        font-size: 14px;
        line-height: 16px;

        > i {
          display: block;
          width: 8px;
          height: 8px;
          margin: 2px;
          border-radius: 50%;
        }

        .lab {
          width: 4em;
          margin-left: 4px;
          color: rgba(255, 255, 255, 0.6);
        }

        .val {
          flex: 1;
          overflow: hidden;
          font-family: 'DIN-Light';
          text-align: right;
        }

        .rate {
          width: 4em;
          font-family: 'DIN-Light';
          text-align: right;
        }
      }
    }
  }

  .total {
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    text-align: center;
    transform: translate(-50%, -50%);

    .lab1 {
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      line-height: 17px;
    }

    .val1 {
      margin-bottom: 4px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 24px;
      font-family: 'DIN-Medium';
      line-height: 29px;
    }

    .yoy {
      display: flex;
      align-items: center;

      .lab2 {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        line-height: 20px;
      }

      .val2 {
        font-family: 'DIN-Light';
      }

      > i {
        display: block;
        width: 0;
        height: 0;
        margin: 0 5px;
        border-right: 3px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 3px solid transparent;
      }

      &.up {
        .val2 {
          color: #ff6969;
        }

        > i {
          border-bottom-color: #ff6969;
        }
      }

      &.down {
        .val2 {
          color: #30d485;
        }

        > i {
          border-bottom-color: #30d485;
          transform: rotate(180deg);
        }
      }
    }
  }
}
